<template>
    <div id="register">
  
      <div class="me-register-box me-register-box-radius">
        <h1>注册界面</h1>
  
        <el-form ref="registerForm" :model="registerForm" :rules="rules">
  
          <el-form-item prop="username">
            <div class="my-form1">
              <img src="../assets/img/user.png" id="user-img">
              <input class="my-input" placeholder="用户名" v-model="registerForm.username" ref="username" />
            </div>
          </el-form-item>
  
          <el-form-item prop="studentId">
            <div class="my-form1">
              <img src="../assets/img/id.png" id="password-img">
              <input class="my-input" placeholder="学号" v-model="registerForm.studentId" ref="studentId" />
            </div>
          </el-form-item>
  
          <el-form-item prop="password">
            <div class="my-form1">
              <img src="../assets/img/lock.png" id="password-img">
              <input class="my-input" placeholder="密码" type="password" v-model="registerForm.password" ref="password" />
            </div>
          </el-form-item>
  
          <el-form-item size="small" class="me-register-button">
            <el-button type="primary" @click.native.prevent="register('registerForm')">注册</el-button>
          </el-form-item>
  
        </el-form>
  
      </div>
    </div>
  </template>
  
  <script>
  import { registerUser } from '../api/api';
  export default {
    name: 'register',
    data() {
      return {
        registerForm: {
          username: '',
          studentId: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '用户名不能为空！' }
          ],
          studentId: [
            { required: true, message: '学号不能为空！' },
            { min: 9, message: '学号至少由九位组成!' }
          ],
          password: [
            { required: true, message: '密码不能为空！' },
            { min: 6, message: '密码至少由六位组成！' }
          ]
        }
      }
    },
    methods: {
      register(formName) {
        let that = this;

        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.registerForm.username.trim() != "" && this.registerForm.password.trim() != "") {
              let params = new URLSearchParams();
              params.append("username", this.registerForm.username);
              params.append("studentId", this.registerForm.studentId);
              params.append("password", this.registerForm.password);
              registerUser(params)
                .then(function (response) {
                  console.log(response);
                  if (response.data === "注册成功") {
                    that.$router.push({ name: "Home" });
                  } else if (response.data === "注册失败") {
                    alert("注册失败，用户名已存在");
                  }
                })
                .catch(function (error) {
                  console.log(error);
                });
            }
          } else {
            if (this.registerForm.username.trim() === "") {
              this.$refs.username.style.borderColor = "red";
            } else {
              this.$refs.username.style.borderColor = "#797979";
            }

            if (this.registerForm.password.trim() === "") {
              this.$refs.password.style.borderColor = "red";
            } else {
              this.$refs.password.style.borderColor = "#797979";
            }
            return false;
          }
        });
      },
    },
  }
  </script>
  
  <style scoped>
  
  #register {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    background-color: #968fbb;
    color: #FFFFFF;
    transform: scale(1.2);
  }
  
  .me-register-box {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: #464646;
    margin-top: 100px;
    margin-left: -150px;
    left: 50%;
    padding: 30px;
  }
  
  .me-register-box-radius {
    border-radius: 10px;
  }
  
  .me-register-box h1 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    vertical-align: middle;
  }
  
  .my-input {
    width: 255px;
    height: 35px;
    background: #323232 !important;
    color: #FFFFFF;
    border: 0.1px solid #797979;
    padding-left: 35px;
  }
  
  #user-img,
  #email-img,
  #password-img {
    width: 20px;
    height: 20px;
    position: absolute;
    margin-top: -10px;
    top: 50%;
    left: 5px;
  }
  </style>